import React, {useState} from 'react';
import {Button, Divider, Form, Input, Radio, Select, Switch} from "antd";
import {Typography} from 'antd';

const {Title} = Typography;

type LayoutType = Parameters<typeof Form>[0]['layout'];

const SysOption: React.FC = () => {
    const [form] = Form.useForm();

    return (
        <>
            <Title level={4} style={{paddingBottom:'20px'}}>系统设置</Title>
            <Form
                layout="vertical"
                form={form}
                style={{maxWidth: 600}}
            >
                <Form.Item label="自动报警" >
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
                </Form.Item>
                <Form.Item label="SQL 执行消耗大于多少毫秒时报警" >
                    <Input placeholder="请输入毫秒数"  />
                </Form.Item>

                <Divider orientation="left" orientationMargin="0" style={{padding:"40px 0 10px 0"}}>邮件配置</Divider>

                <Form.Item label="邮箱接收报警信息">
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
                </Form.Item>

                <Form.Item label="接收邮箱">
                    <Input placeholder="请输入报警接收邮箱"/>
                </Form.Item>

                <Form.Item label="SMTP 地址">
                    <Input placeholder="例如：smtp.qq.com"/>
                </Form.Item>


                <Form.Item label="用户名">
                    <Input placeholder="例如：smtp.qq.com"/>
                </Form.Item>

                <Form.Item label="密码">
                    <Input placeholder="例如：smtp.qq.com"/>
                </Form.Item>


                <Form.Item label="使用 SSL">
                    <Switch checkedChildren="使用" unCheckedChildren="不使用" />
                </Form.Item>


                <Divider orientation="left" orientationMargin="0" style={{padding:"40px 0 10px 0"}}>短信配置</Divider>

                <Form.Item label="短信接收报警信息">
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
                </Form.Item>

                <Form.Item label="接收手机号">
                    <Input placeholder="请输入报警接收手机号码"/>
                </Form.Item>

                <Form.Item label="短信服务商">
                    <Select
                        defaultValue="aliyun"
                        style={{ width: 120 }}
                        options={[
                            { value: 'aliyun', label: '阿里云' },
                            { value: 'qcloud', label: '腾讯云' },
                        ]}
                    />
                </Form.Item>

                <Form.Item label="AppId">
                    <Input placeholder="服务商 AppId"/>
                </Form.Item>

                <Form.Item label="AppSecret">
                    <Input placeholder="服务商 App Secret"/>
                </Form.Item>




                <Form.Item>
                    <Button type="primary">提交</Button>
                </Form.Item>

            </Form>
        </>
    );
};

export default SysOption;
